import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
import DetailView from "../views/DetailView.vue";
const About = () => import("../views/AboutView.vue");

Vue.use(VueRouter);

const routes = [
  {
    path: "/home",
    name: "home",
    component: HomeView,
  },
  {
    path: "/detail/:id",
    // component: DetailView,
    components: {
      default: DetailView,
      aa: About,
      bb: HomeView
      // aa, bb 给router-view 起的名字
    },
    meta: { needLogin: true },
  },
  {
    path: "/about",
    name: "about",
    component: About,
    // beforeEnter: (to, from, next) => {
    //  console.log('about 路由独享守卫')
    //  console.log(to)
    //  console.log(from)
    // //  next();
    // }
  },
  {
    path: "/",
    redirect: "/home",
  },
];
// console.log('hehe',process)
const router = new VueRouter({
  mode: "history",
  // base: process.env.BASE_URL,
  routes,
});

/*
根据权限不同用户使用路径是不一样的
1.权限列表存前端，用户登录后 后端告诉用户角色信息
   简单快捷 不灵活 动态添加路径 或者 角色
2.将用户或者权限信息存放在后端数据库
   登录之后 后端登录的人能访问那些页面
*/

// let obj = {
//   root: ["/home","about","/hhe"],
//   admin: ["/home","/about"],
//   user: ["/home"]
// }

// const  authArr =  ["/home","about","/hhe","/xixi"]
// router.beforeEach((to,from, next) => {
//   const path = to.path;
//   if(authArr.includes(path)) {
//     next()
//   }
// })
// 全局后置后卫 已经跳转完毕 没法拦截 没有next
// 数据上报错误上报 埋点
// router.afterEach((to,from) => {
//   console.log(to)
//   console.log(from)
// })

// 拦截登录 
// router.beforeEach((to,from,next) => {
//   console.log(to)
//   if(to.meta.needLogin) {
//     // next 默认继续向下跳，也可以跳转其他路径
//     next('/login')
//   } else {
//     next()
//   }

// }) 

export default router;
